﻿@page "/products/{id:guid}"
@using EShopOnAbp.Localization
@using Microsoft.Extensions.Localization
@using System.Globalization
@using Volo.Abp.GlobalFeatures
@using Volo.CmsKit.GlobalFeatures
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating

@inject IStringLocalizer<EShopOnAbpResource> L

@model EShopOnAbp.PublicWeb.Pages.ProductDetailModel


@section styles{
    <abp-style src="/Pages/productDetails.css"/>
}

@section scripts {
    <abp-script src="/client-proxies/basket-proxy.js"/>
    <abp-script src="/Pages/index.js"/>
    <abp-script src="/Pages/productDetail.js"/>
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-6 col-sm-6 ">
            <div class="product-container">
                @{
                    var product = Model.Product;
                    var productPrice = product.Price.ToString("C", new CultureInfo("en-US"));
                    string productImage = !product.ImageName.IsNullOrEmpty() ? $"product-images/{product.ImageName}" : $"product-images/@product.ImageName";
                    string buyText = L["Index:AddToBasket"];
                    <div class="product-list-item" data-product-id="@product.Id.ToString()">
                        <a href="/products/@product.Id.ToString()">
                            <div class="product-title">
                                <span>
                                    <h6>@product.Name</h6>
                                    <span class="d-block text-muted">@product.Code</span>
                                </span>
                            </div>
                            <div class="product-image">
                                <img src="@productImage" loading="lazy"/>
                            </div>
                            <div class="product-count">
                                <span class="d-block">@L["StockCount"]: @product.StockCount</span>
                            </div>
                        </a>
                        <div class="product-item-bottom">
                            <div class="item-added">
                                <div class="fa fa-check" style="color: yellowgreen; padding-right: 1em;"></div>
                                <span style="display: flex">Added to cart</span>
                            </div>
                            @if (product.StockCount > 0)
                            {
                                <abp-button class="add-basket-button" button-type="Warning" text="@buyText" data-product-id="@product.Id.ToString()"></abp-button>
                            }
                            else
                            {
                                <abp-button disabled="true" class="add-basket-button" button-type="Warning" text="@L["Index:OutOfStock"]"/>
                            }
                            <div class="info-section col">
                                <span class="product-price">@productPrice</span>
                            </div>
                        </div>
                    </div>
                }
            </div>

            <abp-row>
                <abp-column size-md="_6">
                    @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>() && Model.IsPurschased)
                    {
                        @await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = @product.Id.ToString(), isReadOnly = false })
                    }
                </abp-column>
                <abp-column size-md="_12">
                    @* Need read-only commenting system *@
                    @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>() && Model.IsPurschased)
                    {
                        @await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = @product.Id.ToString(), isReadOnly = true })
                    }
                </abp-column>
            </abp-row>

        </div>
    </div>
</div>